<template>
    <view :class="['u-back-top--mode--' + mode]" :style="[{
		bottom: bottom + 'rpx',
		right: right + 'rpx',
		borderRadius: mode == 'circle' ? '10000rpx' : '8rpx',
		zIndex: uZIndex,
		opacity: opacity
	}, customStyle]" class="u-back-top" @tap="backToTop">
        <view v-if="!$slots.default && !$slots.$default" class="u-back-top__content">
            <u-icon :custom-style="iconStyle" :name="icon" @click="backToTop"></u-icon>
            <view class="u-back-top__content__tips">
                {{ tips }}
            </view>
        </view>
        <slot v-else/>
    </view>
</template>

<script>
export default {
    name: 'u-back-top',
    props: {
        // 返回顶部的形状，circle-圆形，square-方形
        mode: {
            type: String,
            default: 'circle'
        },
        // 自定义图标
        icon: {
            type: String,
            default: 'arrow-upward'
        },
        // 提示文字
        tips: {
            type: String,
            default: ''
        },
        // 返回顶部滚动时间
        duration: {
            type: [Number, String],
            default: 100
        },
        // 滚动距离
        scrollTop: {
            type: [Number, String],
            default: 0
        },
        // 距离顶部多少距离显示，单位rpx
        top: {
            type: [Number, String],
            default: 400
        },
        // 返回顶部按钮到底部的距离，单位rpx
        bottom: {
            type: [Number, String],
            default: 200
        },
        // 返回顶部按钮到右边的距离，单位rpx
        right: {
            type: [Number, String],
            default: 40
        },
        // 层级
        zIndex: {
            type: [Number, String],
            default: '9'
        },
        // 图标的样式，对象形式
        iconStyle: {
            type: Object,
            default() {
                return {
                    color: '#909399',
                    fontSize: '38rpx'
                }
            }
        },
        // 整个组件的样式
        customStyle: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    watch: {
        showBackTop(nVal, oVal) {
            // 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
            // 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
            if (nVal) {
                this.uZIndex = this.zIndex;
                this.opacity = 1;
            } else {
                this.uZIndex = -1;
                this.opacity = 0;
            }
        }
    },
    computed: {
        showBackTop() {
            // 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
            // 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
            return this.scrollTop > uni.upx2px(this.top);
        },
    },
    data() {
        return {
            // 不透明度，为了让组件有一个显示和隐藏的过渡动画
            opacity: 0,
            // 组件的z-index值，隐藏时设置为-1，就会看不到
            uZIndex: -1
        }
    },
    methods: {
        backToTop() {
            uni.pageScrollTo({
                scrollTop: 0,
                duration: this.duration
            });
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";

.u-back-top {
    width: 80 rpx;
    height: 80 rpx;
    position: fixed;
    z-index: 9;
    @include vue-flex;
    flex-direction: column;
    justify-content: center;
    background-color: #E1E1E1;
    color: $u-content-color;
    align-items: center;
    transition: opacity 0.4s;

    &__content {
        @include vue-flex;
        flex-direction: column;
        align-items: center;

        &__tips {
            font-size: 24 rpx;
            transform: scale(0.8);
            line-height: 1;
        }
    }
}
</style>
